<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { userLoginAPI } from '../../apis/modules/user'
import { useRouter } from 'vue-router';
const router = useRouter()
const isLogin = ref(true)
const loginForm = reactive({
  username: '', password: '', confirmPassword: ''
})

const login = async () => {
  const { username, password } = loginForm;

  const { data } = await userLoginAPI(username, password)
  console.log(data);
  if (data?.status) {
    localStorage.token = 'token'
    router.push('/')
  }

}

const submit = () => {
  login()
}
</script>

<template>
  <div class="box">
    <div class="content" :style="{ height: isLogin ? '85vh' : '90vh' }" :class="isLogin ? 'add-class-content' : ''">
      <img class="register-img images" :class="isLogin ? 'img-appear' : 'img-disappear'" src="./asset/register.jpg">
      <img class="login-img images" :class="isLogin ? 'img-disappear' : 'img-appear'" src="./asset/login.jpg">
      <div class="login-wrapper" :style="{ height: isLogin ? '70vh' : '80vh' }">
        <div class="top-tips">
          <span>小七泡泡屋</span>
          <span class="top-tips-span" @click="isLogin = !isLogin">{{ isLogin ? '注册' : '登录' }}</span>
        </div>
        <h1 class="h1-text">{{ isLogin ? '登录' : '注册' }}</h1>
        <div class="login-form">
          <div class="user-form form-item">
            <div class="text-tips">
              <span>账号</span>
            </div>
            <input v-model="loginForm.username" type="text">
          </div>
          <div class="password-form form-item">
            <div class="text-tips">
              <span>密码</span>
              <span class="forgot-password" v-if="isLogin">忘记密码?</span>
            </div>
            <input v-model="loginForm.password" type="password">
          </div>
          <div class="password-form form-item" v-if="!isLogin">
            <div class="text-tips">
              <span>确认密码</span>
            </div>
            <input v-model="loginForm.password" type="password">
          </div>
          <button class="btn" @click="submit"> {{ isLogin ? '登录' : '注册' }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  background-color: rgb(248, 245, 255);
  width: 100vw;
  height: 100vh;
  min-width: 1200px;

  .content {
    width: 90vw;
    height: 85vh;
    background-color: rgb(228, 218, 232);
    border-radius: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 1s;

    .images {
      margin-left: -150px;
      margin-right: 100px;
      position: absolute;
      left: 15%;
    }

    .login-img {
      width: 45%;
      height: 90%;
      border-radius: 15%;
    }

    .register-img {
      width: 45%;
      opacity: 0;
      border-radius: 15%;
    }

    .login-wrapper {
      width: 30vw;
      height: 70vh;
      border-radius: 40px;
      backdrop-filter: blur(1px);
      background: rgba(244, 240, 245, 0.6);
      padding: 60px;
      box-sizing: border-box;
      position: absolute;
      right: 10%;
      transition: 1s;

      .top-tips {
        span:nth-child(1) {
          font-size: 25px;
          font-weight: 600;
        }

        .top-tips-span {
          font-size: 15px;
          color: rgb(79, 133, 226);
          border-bottom: 1px solid rgb(79, 133, 226);
          float: right;
          line-height: 25px;
          cursor: pointer;
        }
      }

      h1 {
        font-size: 45px;
        margin: 20px 0;
      }

      .login-form,
      .register-form {
        width: 100%;

        .form-item {
          .text-tips {
            color: rgb(123, 122, 123);
            margin: 5px;

            .forgot-password {
              font-size: 15px;
              color: rgb(79, 133, 226);
              border-bottom: 1px solid rgb(79, 133, 226);
              float: right;
              line-height: 25px;
              cursor: pointer;
            }
          }

          input {
            width: 100%;
            height: 50px;
            margin: 5px 0;
            border-radius: 5px;
            border: 0;
            font-size: 17px;
            padding: 0 20px;
            box-sizing: border-box;
          }

          input:focus {
            outline: none;
            border: 1px solid rgb(79, 133, 226);
          }
        }

        .btn {
          // width: 150px;
          width: 100%;
          height: 50px;
          margin: 20px 0;
          background-color: rgb(59, 58, 59);
          border: 0;
          border-radius: 5px;
          color: #fff;
          font-size: 20px;
          cursor: pointer;
        }
      }

      .register-form {
        display: none;
      }
    }
  }
}

.add-class-content {
  background-color: rgb(156, 148, 208) !important;
  transition: .1s;
}

.img-disappear {
  animation: disappear 1s forwards;
  animation-timing-function: ease;
}

.img-appear {
  animation-delay: 1s;
  animation: appear 1s forwards;
  animation-timing-function: ease;
}

@keyframes appear {
  from {
    border-radius: 15%;
    transform: translateX(-50px);
    opacity: 0;
  }

  to {
    border-radius: 5%;
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes disappear {
  from {
    border-radius: 5%;
    transform: translateX(0px);
    opacity: 1;
  }

  to {
    border-radius: 15%;
    transform: translateX(-50px);
    opacity: 0;
  }
}
</style>